<template>
<div 
    class="captcha-bt"
    @click="sendCode">
    {{
        captchaLimitEnd==0?'获取手机验证码':captchaLimitEnd+' s'
    }}
</div>
</template>
<script>
//验证码按钮组件
export default {
    name:"CaptchaBt",
    props:{
        limitTime:{  //计时的间隔时间 默认30s
            type:Number,
            default:30,
        },
    },
    data(){
        return {
            captchaLimitEnd:0,  //限制快要结束的的时间
        };
    },
    methods:{
        startTime(time=undefined){  //计时开始（外部调用）默认使用传递的时间
            this.captchaLimitEnd = time === undefined?this.limitTime: ~~time;
            let timer;
            timer = setInterval(()=>{
                if(this.captchaLimitEnd == 0){
                    clearTimeout(timer);
                }else{
                    this.captchaLimitEnd--;
                }
            },1000);
        },
        sendCode(){  //点击发送事件
            if(this.captchaLimitEnd > 0) return;
            this.$emit('onSend');  //通知外部
        },
    },
}
</script>
<style lang='scss' scoped>
.captcha-bt{
    color: #1080ff;
    font-size: 14px;
}
</style>